<template>
  <view class="bd" style="height: 100vh">
    <view class="person">
      <userHead></userHead>
    </view>
    <view class="report">
      <view class="items bd" v-for="(v, index) in list" :key="index">
        <view class="head flex flex-j-b" @click="goDetail(v)">
          <view class="flex">
            <text class="t1">{{ v.planName }}</text>
          </view>
          <view class="img">
            <image src="../../../../static/img/mark_right.png" mode=""></image>
          </view>
        </view>
        <view class="uni-item-line" style="padding: 10upx 0"></view>
        <view class="detailed">
          <view class="title">
            {{ v.reportUploadTime }}
          </view>
          <!-- <view class="content">
						结果反馈：{{v.remark}}
					</view> -->
          <view class="content">
            医生建议：<span v-html="v.doctorRecord"></span>
          </view>
        </view>
        <view style="border-bottom: 1px solid #eaeaea; padding: 10rpx"></view>
      </view>
    </view>

    <!-- <view class="edit">
			<u-icon name="edit-pen-fill" color="#fff" size="45"></u-icon>
		</view> -->
  </view>
</template>

<script>
import userHead from "../../../../components/home-head/easy_head.vue";
export default {
  components: {
    userHead,
  },
  data() {
    return {
      page: {},
      list: [],
    };
  },
  onReachBottom() {
    //console.log('触底了')
    if (this.page.isLastPage) return;
    this.getListMore(this.page.pageNum + 1);
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    // 获取接种计划
    getList(pageNumber) {
      let self = this;
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/myReport/getList", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          uni.hideLoading();

          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = res.data.data.list;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getListMore(pageNumber) {
      let self = this;
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/medicalRecords/getList", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = self.list.concat(res.data.data.list);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 详情
    goDetail(v) {
      uni.navigateTo({
        url: "/pages/main/child/archives/my-report-detail?id=" + v.planId,
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
//头像部分
.person {
  width: 100%;
  background-color: #18c7e1;
  display: flex;
  // justify-content: center;
  align-items: center;

  .item {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 40upx;

    .headimg {
      width: 20%;
      display: inline-block;
      text-align: center;

      .img {
        width: 80upx;
        height: 80upx;
        border-radius: 50%;
      }

      .img_active {
        width: 110upx;
        height: 110upx;
        border-radius: 50%;
      }

      .text {
        margin-top: 5upx;
        font-size: 30upx;
        color: #ffffff;
      }
    }
  }
}

.report {
  width: 100%;

  .items {
    width: 100%;
    padding: 20upx 40upx;

    .head {
      width: 100%;
      font-size: 35upx;
      font-weight: bold;
      color: #525252;

      .img {
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 15upx;
          height: 25upx;
        }
      }
    }

    .detailed {
      width: 100%;
      padding: 20upx 0 10upx 0;
      /* display: flex; */
      justify-content: center;
      align-items: center;

      .title {
        width: 50%;
        display: flex;
        align-items: center;
        font-size: 25upx;
        color: #18c7e1;
      }

      .content {
        display: flex;
        align-items: center;
        font-size: 30upx;
        color: #949494;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.edit {
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
  background-color: #84e1ef;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10%;
  bottom: 20%;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  //  黑暗模式
  .bd {
    background-color: #1b1c1e !important;
  }
  .t1 {
    color: #ccc !important;
  }
  .inp {
    color: #e5e8e8 !important;
  }
}
</style>